<template>
	<view>
		<!-- 导航栏 -->
		<navigation  title="酒店列表"></navigation>
		<uni-nav-bar>			
			<view slot="left" class="left">
				<picker @change="bindPickerChange" :value="0" :range="city">
				  <text style="margin-right: 10upx;">上海市</text>
				</picker>
				<uni-icons type="arrowdown" size="18"></uni-icons>
			</view>
			<view slot="default" class="default">							
				<input class="input" type="text" value="" placeholder="请输入酒店名称" />
				<uni-icons class="icon" type="search" size="18"></uni-icons>
			</view>
			<view slot="right" class="right" @click="visible=true">筛选</view>
		</uni-nav-bar>
		<view class="list_box">
			<view class="list_mian" @click="gotoHotel()">
				<view class="left">
					<image src="" mode=""></image>
				</view>
				<view class="center">
					<view class="" style="font-size:28upx;font-family:PingFang SC;font-weight:500;color:rgba(30,30,30,1);">
						上海市斯格威大酒店......
					</view>
					<view class="address" >
				        <uni-icons  type="location-filled" size="16"></uni-icons>		
						<text class="one_ellipsis" style="width: 217upx;display:inline-block;">我是很长的地址.....我是很长的地址</text>
						<text class="wedding" style="display:inline-block;">婚礼会所</text>
					</view>
				</view>
				<view class="right">					
					<!-- <uni-icons type="checkbox-filled" color="#ddd" size="26"></uni-icons> -->
					<uni-icons type="checkbox-filled" color="##406CEB" size="26"></uni-icons>
				</view>
			</view>
		</view>
		
		<view class="footer_btn">
			<text>取消</text>
			<text>确定</text>
		</view>
		
		<uni-drawer :visible="visible" mode="right"  @close="visible=false">
		    <view style="padding: 35upx;position:relative ;height: 100vh;box-sizing: border-box;">
		        <view class="follw_stutas">
		        	<text class="stutas_text">桌数</text>
					<view class="stutas_text_child">
					  <text class="stutas_text">大桌（含35桌以上）</text>
					  <text class="stutas_text">小桌(35桌以下)</text>
					  <text class="stutas_text">不限</text>					  
					</view>
		        </view>
				<button type="default" style="
				position: absolute;
				bottom: 46upx;
				right: 30upx;
				width:529upx;
				height:73upx;
				line-height: 73upx;
				background:rgba(64,108,235,1);
				border-radius:36px;
				color: #FFFFFF;">保存</button>
		    </view>
		</uni-drawer>
		
	</view>
</template>

<script>
	import navigation from '@/component/navigation.vue'
	export default {
		components:{
			navigation,			
		},	
		data() {
			return {
				city: ['上海', '广州', '苏州', '杭州'],
				visible:false
			};
		},
		methods:{
			//酒店详情
			gotoHotel(){
				uni.navigateTo({
					url:"../hotelList/hotelDetail/hotelDetail"
				})
			}
		}
	}
</script>

<style lang="less">
page{
	background:rgba(245,246,246,1);
}
.left{
	font-size:30upx;
	font-family:PingFang SC;
	font-weight:500;
	color:rgba(30,30,30,1);
	display: flex;
	align-items: center;
}
.input{
	width:438upx;
	height:58upx;
	background:rgba(227,227,227,1);
	border:1upx solid rgba(0, 0, 0, 0.46);
	opacity:0.2;
	border-radius:29upx;
	padding-left: 20upx;
	box-sizing: border-box;
}
.default{
	position: relative;
	height: 58upx;
    .icon{
		position: absolute;
		right: 32upx;
		top: -15upx;
	}	
}
.right{
	font-size:26upx;
	font-family:PingFang SC;
	font-weight:500;
	color:rgba(64,108,235,1);
}

.list_box{
	width: 100%;
	height: 100%;
	background: #FFFFFF;
	.list_mian{
		width: 100%;
		padding: 24upx 32upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		.left{
			image{
				width:210upx;
				height:180upx;
				background:rgba(245,246,246,1);
				border-radius:5upx;
			}
		}
		.center{
			display: flex;
			flex-direction: column;
			justify-content: space-between;	
		    .icon{
				display: flex;
				justify-content: left;
				align-items: center;
				image{
					margin-right: 8upx;
					width:25upx;
					height:25upx;
					background: #F0AD4E;
				}
			}
			.address{
				display: flex;
				justify-content: left;
				align-items: center;
				font-size:26upx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(102,102,102,1);
				.wedding{
					font-size:24upx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(102,102,102,1);
					margin-left: 29upx;
				}
			}
		}
		.right{
			width: 44upx;						
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image{
				width:44upx;
				height:44upx;
				background:rgba(245,246,246,1);
			}
		}
	}
}


.follw_stutas{
   .stutas_text{
	   font-size:30upx;
	   font-family:PingFang SC;
	   font-weight:bold;
	   color:rgba(0,0,0,1);
   }
   .stutas_text_child{
	   margin-top: 23upx;
	   display: flex;
	   justify-content: left;
	   flex-wrap: wrap;
	   text{
		   width:250upx;
           height:74upx;
		   text-align: center;
		   line-height: 74upx;
		   margin-right: 10upx;
		   margin-bottom: 16upx;
		   background:rgba(246,246,246,1);
		   border-radius:5upx;
		   font-size:26upx;
		   font-family:PingFang SC;
		   font-weight:500;
		   color:rgba(25,25,25,1);
	   }
   }
}
.footer_btn{
	width:100%;
	height:103upx;
	position: fixed;
	bottom: 0upx;
	left: 0;
	background:rgba(255,255,255,1);
	border:1upx solid rgba(166, 166, 166, 0.46);
	display:flex;
	justify-content: space-around;
	align-items: center;
	text{
		font-size:30upx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(102,102,102,1);
	}
}
</style>
